<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()            功能
		                  1个参  传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						  2个参 传入css属性名和属性值
						  功能：获取匹配元素集合中所有元素的css属性值
						  n个参：传入多个css属性名和属性值
						  语法糖：css({"属性名":"属性值",
						              "属性名":"属性值",
									  ..........
									  "属性名":"属性值",
									})
		 width()和height() 功能：匹配元素集合中第一个元素高度
		                   无参：获取匹配无素集合中第一个元素宽高度
						   有参：没置四配元素集合中第一个元素宽高度
						   width(数值)
		 
		 outerWidth()和outerHeight()
		 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			    .box {
			       background-color: #4CAF50;
			       padding: 20px;
			       margin: 20px;
			       border: 5px solid #333;
			     }
			     
			     .result {
			       margin-top: 10px;
			       font-weight: 700;
			     }
		 </style>
	</head>
	  <body>
        <!-- 1.显示效果区域 -->
        <div class="box" id="targetBox"></div>
        <button id="getColorbtn">获取颜色属性值</button>
        <button id="setColorbtn">设置颜色效果</button>
        <button id="setbtn">设置多属性效果</button>
        <button id="gsbtn">获取元素宽度/设置元素宽度</button>
        <button id="bpbtn">获取高度 (内边距+边框)</button>
        <button id="bpmbtn">获取高度 (内外边距+边框)</button>
        <!-- 2.结果提示功能区域 -->
        <div class="result" id="result"></div>
        <script>
            /* 1.点击 获取颜色属性值 按钮  获取颜色值并打印页面上*/
            $("#getColorbtn").click(function(){
                //获取css的属性值方式：传入属性名即可
                var bgColor=$(".box").css("background-color");
                //页面上打印属性值 ？？       
                $("#result").text("获取属性值是："+bgColor)
            });
			/* 2.点击 获取颜色属性值 按钮 获取颜色值并打印页面上*/
			  $("#setColorbtn").click(function(){
				  //改成橙色123
				  $(".box").css("background-color","orange");
				  $("#result").text("改变后颜色为：橙色");
			  });
			           
			/* 3.点击 设置多属性效果 按钮 圆、背景色、阴影*/ 
			  $("#setbtn").click(function(){
				 $(".box").css({"background-image":"url(../img/如何.jpg)",
				                "border":"5px solid #ff0",
								"width":"300px",
								"height":"300px",
								"background-size":"100% 100%",
								"border-radius":"50%",
								"box-shadow":"5px 5px 10px #a5a59f"
							   }); 
			  });
			/* 4.点击  获取、设置宽度*/  
			$("#gsbtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取宽度是："+w+"px");
			});
			/* 5.点击 获取高度 按钮 计算box空间高度*/ 
			$("#bpbtn").click(function(){
			   var bp=$(".box").outerHeight();
			   $("#result").text("获取高度是："+bp+"px");
			});
			/* 6.*/
			$("#bpmbtn").click(function(){
			   var bpm=$(".box").outerHeight(true);
			   $("#result").text("获取高度是："+bpm+"px");
			});
        </script>
</html>